<script setup>

import {Coin, Document, Expand, Fold, Grid, HomeFilled, MessageBox} from "@element-plus/icons-vue";
import {inject} from "vue";
import TableData from "../common/TableData.vue";

const menus = inject("menus");
const local_set = inject("local_set")
</script>

<template>
  <el-container class="flow-content" style="background-color: #545c64;overflow: hidden;">
    <el-header height="50px" style="padding:  0 10px;line-height: 50px;">
      <el-row type="flex" justify="center" align="middle" style="color: white;height: 100%;width: 100%;">
        <div>
          <span v-if="menus.expanded">ETL * </span>
          <span >Flow</span>
        </div>
      </el-row>
    </el-header>
    <el-main class="console-main" style="background-color: #545c64;padding: 0;overflow-y: hidden;">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          text-color="#fff"
          :default-active="$route.path"
          style="border: 0;padding-top: 10px;"
          :collapse="!menus.expanded"
          router
          :collapse-transition="false"
      >
        <el-menu-item index="/console">
          <el-icon><HomeFilled /></el-icon>
          <template #title>
            <span>{{ local_set.current.conf.menu.menu_dashboard }} </span>
          </template>
        </el-menu-item>
        <el-sub-menu index="metadata">
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>{{ local_set.current.conf.menu.menu_metadata }} </span>
          </template>
          <el-menu-item index="/console/metadata/datasource">
            <el-icon><Coin/></el-icon>
            <template #title>
              <span>{{ local_set.current.conf.menu.menu_md_source }} </span>
            </template>
          </el-menu-item>
          <el-menu-item index="/console/metadata/table">
            <el-icon><Document/></el-icon>
            <template #title>
              <span>{{ local_set.current.conf.menu.menu_md_table }} </span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-main>
    <el-footer height="60px" style="line-height: 40px;color: white;padding: 10px;">
      <el-row :justify="menus.expanded?'space-between':'space-around'"
              style="height: 100%;"
              align="middle">
        <el-text style="color: white;" v-if="menus.expanded" >Version: 0.0.1</el-text>
        <el-icon @click="menus.expanded=!menus.expanded" size="26" style="cursor: pointer;">
          <Expand v-if="menus.expanded"/>
          <Fold v-else/>
        </el-icon>
      </el-row>
    </el-footer>
  </el-container>
</template>

<style scoped>
.el-menu-item , .el-sub-menu{
  --el-menu-horizontal-height: 35px;
  --el-menu-item-height: 40px;
  --el-menu-sub-item-height: 40px;
}
.el-menu-item:hover {
  background-color: #41b6dc;
}
.el-menu-item.is-active{
  background-color: #1f7bdc;
  color: white;
}
</style>